<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>欢迎使用网站后台管理系统</title>
    <link rel="stylesheet" href="assets/login/css/reset.css" />
    <link rel="stylesheet" href="assets/login/css/login.css" />
</head>

<body>
    <div class="page" id="app">
        <div class="loginwarrp">
            <div class="logo">管理员登录</div>
            <div class="login_form">
                <li class="login-item">
                    <span>用户名：</span>
                    <input type="text" name="username" id="username" v-model="username" placeholder="请输入用户名" class="login_input">
                    <span id="count-msg" class="error"></span>
                </li>
                <li class="login-item">
                    <span>密　码：</span>
                    <input type="password" name="password" id="password" v-model="password" placeholder="请输入密码" class="login_input">
                    <span id="password-msg" class="error"></span>
                </li>
                <div class="clearfix"></div>
                <li class="login-sub">
                   <input type="button" value="确认登录" @click="toLogin()" />
                   <input type="button" value="取消重置" @click="reset()" />
                </li>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="assets/js/axios.min.js"></script>
    <script type="text/javascript" src="assets/js/vue.js"></script>
    <script type="text/javascript">
      const vue = new Vue({ // 实例化Vue对象
        el: '#app',// 绑定作用域
        data: { //定义数据
          username: '', // 定义用户名数据
          password: '', // 定义登录密码数据
        },
        methods: {
          toLogin: function () { // 登录按钮点击方法
            let _this = this;
            if (_this.username == '') { // 判断用户名是否为空
               $('#count-msg').html("用户名不能为空");
               return;
            }
            if (_this.password == '') { // 判断密码是否为空
              $('#password-msg').html("密码不能为空");
              return;
            }
            var data = { // 定义传参数据
              username: _this.username, // 接收用户名数据
              password: _this.password, // 接收密码数据
            }
            axios.post('http://localhost:8080/vue_gxhfztjxt/login/login.action', data).then(result => { // 通过Axios 提交数据并获取返回值
              if (result.data.success) { // 登录成功
                // 通过sessionStorage 保存登录信息
                sessionStorage.setItem('adminid', result.data.adminid);
                sessionStorage.setItem('adminname', result.data.adminname);
                sessionStorage.setItem('realname', result.data.realname);
                sessionStorage.setItem('role', result.data.role);
                window.location.href = 'main.html'; // 跳转到主界面
              } else { // 登录失败
                alert(result.data.message);
                _this.reset();
              }
            })
          },
          reset: function () {
            this.username = '';
            this.password = '';
          },
        },
        created() { // 生命周期相关的函数
          sessionStorage.clear(); // 清空sessionStorage
        },
      })
    </script>

</body>

</html>


